<template>
  <!-- 登录组件 -->
  <div class="loginCom">
    <div class="contentBox">
      <!-- 用户 -->
      <div class="login_text">
        <input
          type="text"
          placeholder="用户名/邮箱/已验证手机"
          v-model="userName"
          ref="userInp"
          @input="btnBgc"
        />
        <van-icon
          name="cross"
          size="20px"
          color="#dcdcdc"
          v-show="temp"
          @click="cleanInp1"
        />
      </div>
      <!-- 密码 -->
      <div class="login_text">
        <div class="passwordBox">
          <input
            type="password"
            placeholder="请输入密码"
            class="paswdInput"
            v-model="userPasd"
            ref="passwordInp"
            @input="btnBgc"
          />
          <van-icon
            name="cross"
            size="20px"
            color="#dcdcdc"
            v-show="tempPas"
            @click="cleanInp2"
          />
        </div>
        <div class="rightBox">
          <van-icon
            name="closed-eye"
            size="20px"
            color="#dcdcdc"
            class="minEyes"
            v-show="!eyeFonts"
            @click="eyeFontsOn"
          />
          <van-icon
            name="eye-o"
            size="20px"
            color="#dcdcdc"
            class="minEyes"
            v-show="eyeFonts"
            @click="eyeFontsDo"
          />
          <span class="forgetPaswd" @click="forgetPaswd">忘记密码</span>
        </div>
      </div>
      <!-- 登录按钮 -->
      <button
        class="goLogin"
        @click="loginApp"
        ref="loginBtn"
        btnBgc
        :disabled="disabled"
      >
        登录
      </button>
      <p class="goRegister" @click="$router.push('/register')">快速注册</p>
    </div>
  </div>
</template>

<script>
// 轻提示组件
import { Toast } from "vant";
// 提示模态框组件
import { Dialog } from "vant";
export default {
  data() {
    return {
      userName: "",
      userPasd: "",
      temp: false, // 用户框
      tempPas: false, // 密码框
      eyeFonts: false, // 小眼睛
      disabled: true, // 按钮禁用
    };
  },
  methods: {
    // 小眼睛点击事件
    eyeFontsOn() {
      this.eyeFonts = !this.eyeFonts;
      this.$refs.passwordInp.type = "text";
    },
    eyeFontsDo() {
      this.eyeFonts = !this.eyeFonts;
      this.$refs.passwordInp.type = "password";
    },
    // 叉号点击事件
    cleanInp1() {
      this.$refs.userInp.value = "";
    },
    cleanInp2() {
      this.$refs.passwordInp.value = "";
    },
    // 监听输入框输入事件
    btnBgc() {
      // 用户框叉号
      if (this.$refs.userInp.value.trim()) {
        this.temp = true;
      } else {
        this.temp = false;
      }
      // 密码框叉号
      if (this.$refs.passwordInp.value.trim()) {
        this.tempPas = true;
      } else {
        this.tempPas = false;
      }

      // 判断按钮是否变色
      if (
        this.$refs.userInp.value.trim() &&
        this.$refs.passwordInp.value.trim()
      ) {
        this.$refs.loginBtn.classList.add("bgc");
        this.disabled = false;
      } else {
        this.$refs.loginBtn.classList.remove("bgc");
        this.disabled = true;
      }
    },
    // 登录账户
    loginApp() {
      let info = {
        type: "post",
        url: "/user/login",
        head: "application/x-www-form-urlencoded",
        data: {
          username: this.userName,
          password: this.userPasd,
        },
      };
      this.$netWork(info).then((res) => {
        if (res.data.status === 0) {
          sessionStorage.setItem("token", res.data.data.token);
          this.$router.push("/myHome");
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    // 忘记密码点击事件
    forgetPaswd() {
      Dialog.alert({
        message: "不找了~找不到了~~",
        theme: "round-button",
      }).then(() => {
        // on close
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.loginCom {
  position: relative;
  width: 100%;
  .login_text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 11px 0;
    margin-top: 11px;
    border-bottom: 2px solid #dcdcdc;
    box-sizing: border-box;

    .passwordBox {
      width: 60%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .rightBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 40%;
    }

    input {
      width: 90%;
      height: 100%;
      border: none;
      padding-left: 5px;
      margin-left: 11px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 500;
      color: #222;
    }
    .paswdInput {
      width: 160px;
    }
    .forgetPaswd {
      display: inline-block;
      height: 32px;
      font-size: 14px;
      padding-left: 13px;
      margin-left: 13px;
      color: #666;
      line-height: 32px;
      border-left: 1px solid #dcdcdc;
    }
    .minEyes {
      margin-left: 16px;
    }
  }
  .goLogin {
    width: 100%;
    height: 64px;
    margin-top: 55px;
    border: none;
    border-radius: 50px;
    background: rgba(246, 53, 21, 0.5);
    font-size: 17px;
    color: #fff;
  }
  .goRegister {
    padding: 22px 10px;
    font-size: 15px;
    color: #999;
    text-align: right;
  }
  .bgc {
    background-color: #f63515;
  }
}
</style>
